<app-content-header></app-content-header>

<nz-spin [nzSpinning]="loading"></nz-spin>

<ng-container *ngIf="!loading">
  <app-detail-header
    [title]="'GENERAL.INFO.BASIC' | i18n"
    (edit)="triggerBaseEdit()"
    (cancel)="cancelBase()"
    (save)="saveBase()"
    [hideIcon]="!aclService.canAbility('api.put.camel.role.one')"></app-detail-header>
  <div class="cil__info-item-blocks bottom-columns">
    <app-info-row
      [columns]="firstColumns"
      [height]="'160'"
    ></app-info-row>
  </div>

  <div class="cil__info-item-blocks bottom-columns">
    <app-info-row
      [columns]="secondColumns"
      [height]="'160'"
    ></app-info-row>
  </div>

  <app-detail-header
    *ngIf="!loading"
    [title]="'GENERAL.INFO.OTHER' | i18n"
    [ifEditable]="false"
    [tabs]="tabs"
    class="cil__scroll-div"
  ></app-detail-header>
</ng-container>

<router-outlet *ngIf="!loading"></router-outlet>

<ng-template #tplControl>
  <div class="btn-groups">
    <!-- 暂时不支持该功能
    <button class="custom-btn ng-star-inserted" (click)="dumplicat(detailData.roleId)">
      <i nz-icon [nzIconfont]="'icon-delete-twotone'"></i>
    </button>
    <span class="btn-separator">|</span>
    -->
    <button
      acl [acl-ability]="'api.delete.camel.role.one'"
      class="custom-btn ng-star-inserted"
      (click)="delete(detailData.roleId)">
      <i nz-icon [nzIconfont]="'icon-delete-twotone'"></i>
    </button>
    <span class="btn-separator">|</span>
    <button
      acl [acl-ability]="'api.put.camel.role.one.freeze'"
      class="custom-btn ng-star-inserted"
      (click)="freeze()"
      *ngIf="detailData.status === 'normal'">
      <i nz-icon [nzIconfont]="'icon-lock-square'"></i>
    </button>
    <button
      acl [acl-ability]="'api.put.camel.role.one.unfreeze'"
      class="custom-btn ng-star-inserted"
      (click)="unfreeze()"
      *ngIf="detailData.status === 'freeze'">
      <i nz-icon [nzIconfont]="'icon-unlock'"></i>
    </button>
    <span class="btn-separator">|</span>
    <button
      acl [acl-ability]="'api.post.camel.role.one'"
      class="custom-btn ng-star-inserted"
      (click)="copy(detailData.roleId)">
      <i nz-icon [nzIconfont]="'icon-copy-twotone'"></i>
    </button>
  </div>
</ng-template>
